<template>
  <div>
    <el-dialog   width="37%" v-bind="$attrs" v-on="$listeners" @close="onClose" title="管理员设置">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="formData.realName" placeholder="请输入姓名" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="账号" prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入账号" clearable :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item v-if="flag" label="选择角色" prop="roleId">
          <el-select v-model="formData.roleId" placeholder="请选择选择角色" clearable :style="{width: '100%'}">
            <el-option v-for="(item, index) in roleData" :key="index" :label="item.roleName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" :placeholder="placeholder" clearable show-password
            :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import managerApi from "../../api/managerApi";
import rolesApi from "../../api/rolesApi";

export default {
  inheritAttrs: false,
  data() {
    return {
      placeholder:"密码不填为不修改",
      flag:true,
      formData: {
        id:"",
        realName: "",
        userName: "",
        password: "",
        roleId:""
      },
      roleData:[],
      rules: {
        realName: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        userName: [{
          required: true,
          message: '请输入账号',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }],
      },

    }
  },
  methods: {
    open(id) {
      if(id!=""){
        this.placeholder="密码不填为不修改"
        this.rules.password[0].required=false
        managerApi.get(id).then(res=>{
          this.formData=res.data
        })
      }else {
        this.placeholder="请输入密码"
        this.rules.password[0].required=true
      }
      this.$emit('update:visible', true)
    },
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (valid){
          if(this.formData.id!=""){
            managerApi.update(this.formData).then(res=>{
              this.$emit("query")
              this.close()
            })
          }else {
            managerApi.save(this.formData).then(res=>{
              this.$emit("query")
              this.close()
            })
          }
        }

      })
    },
  },
  mounted() {
    rolesApi.list().then(res=>{
      this.roleData=res.data
    })
  }
}

</script>
<style>
</style>
